<template>
    <div class="moduleFields">
      <el-card>
        <div class="opt_wrap">
            <el-button type="text" @click="openDialog('add')">
                <i class="iconfont icon-add"></i>
                新建{{pageParams.name}}字段
            </el-button>
        </div>
        <div class="search_wrap">
            <el-input placeholder="字段名称/字段" v-model="searchCondition" clearable style="width: 260px;" @keyup.enter.native="queryListData">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-select
                v-model="fieldgroup"
                filterable
                clearable
                @change="queryListData"
                placeholder="请选择模型组">
                <el-option
                    v-for="item in fieldGroupData"
                    :key="item.id"
                    :label="item.group"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-select
                v-model="fieldhtmltype"
                filterable
                clearable
                @change="queryListData"
                placeholder="请选择字段类型">
                <el-option
                    v-for="item in fieldhtmltypeData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="table_list">
            <el-table
                :data="tableListData"
                min-height="500"
                border
                v-loading="loading"
                style="width: 100%">
                <el-table-column type="index" align="center" width="40"/>
                <el-table-column label="模型组" align="center" >
                    <template slot-scope="scope">
                        <span>{{scope.row.group_name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="字段名称" align="center" >
                    <template slot-scope="scope">
                        <span>{{scope.row.fieldtitle}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="字段类型" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.fieldhtmltype}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="合同类型" align="center" v-if="code == 'contract'">
                    <template slot-scope="scope">
                        <span class="flag" :style="{background: item.color}" v-for="item in scope.row.type_arr" :key="item.id">{{item.type_name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.fieldsort}}</span>
                    </template>
                </el-table-column>
                
                <!-- <el-table-column label="选项值" align="center" >
                    <template slot-scope="scope">
                        <span>{{scope.row.fieldvalues}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="默认值" align="center" >
                    <template slot-scope="scope">
                        <span>{{scope.row.fielddefault}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="描述" align="center" >
                    <template slot-scope="scope">
                        <span>{{scope.row.fielddescribe}}</span>
                    </template>
                </el-table-column> -->
               
                <el-table-column label="状态" align="center" prop="fieldhtmltype">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            disabled
                            @click.native="changeStatus(scope.row.id,scope.row.status)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center"  width="70">
                    <template slot-scope="scope">
                        <el-button type="text"  size="small" circle  @click="openDialog('edit',scope.row.id)">编辑</el-button>
                        <!-- <el-row type="flex" align="center">
                            <el-col :span="12" >
                                
                            </el-col>
                            <el-col :span="12" >
                                <el-button type="text" size="small" circle  @click="handleDelete(scope.row.id)">删除</el-button>
                            </el-col>
                        </el-row> -->
            　　　　</template>
                </el-table-column>
            </el-table>
            <link-pagination :total="total" :currentPage="currentPage" :limit="limit" v-if="total != 0" @pagination="getPaginationParams"></link-pagination>
        </div>
        <el-dialog :title="isAdd?'新增':'编辑'" :visible.sync="dialogVisible" width="500px" center>
            <div class="dialog_wrap">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="模型组" prop="fieldgroup">
                        <el-select v-model="form.fieldgroup" clearable placeholder="请选择模型组" style="width:318px;">
                            <el-option
                                v-for="item in fieldGroupData"
                                :key="item.id"
                                :label="item.group"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字段名称" prop="fieldtitle">
                        <el-input v-model="form.fieldtitle" placeholder="请填写字段名称" style="width:318px;"></el-input>
                    </el-form-item>
                    
                    
                    <!-- <el-form-item label="合同类型" v-if="code == 'contract'" prop="typestr">
                        <el-checkbox-group v-model="form.typestr">
                            <el-checkbox  v-for="item in contractTypeData" :key="item.id" :label="item.id">{{item.type_name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item> -->
                    <el-form-item label="字段类型" prop="fieldhtmltype" >
                        <el-select v-model="form.fieldhtmltype" clearable placeholder="请选择字段类型" style="width:318px;" :disabled="!isAdd">
                            <el-option
                                v-for="item in fieldhtmltypeData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选项值" prop="fieldvalues" v-if="form.fieldhtmltype =='select' || form.fieldhtmltype =='checkboxarray' || form.fieldhtmltype =='radio'" >
                        <el-input type="textarea" :autosize="true" v-model="form.fieldvalues" style="width:318px;" placeholder="示例1：
男
女
示例2：
1=女
2=男"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="fielddescribe">
                        <el-input v-model="form.fielddescribe" placeholder="请填写描述" style="width:318px;"></el-input>
                    </el-form-item>
                    <el-form-item label="默认值" prop="fielddefault">
                        <el-input v-model="form.fielddefault" placeholder="请填写默认值" style="width:318px;"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="排序" prop="fieldsort">
                        <el-input v-model="form.fieldsort" placeholder="请填写排序" style="width:318px;"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="是否必填" prop="fieldrequire">
                        <el-radio-group v-model="form.fieldrequire">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="创建时间" v-if="!isAdd">
                        <span>{{form.create_time}}</span>
                    </el-form-item> 
                    <el-form-item label="更新时间" v-if="!isAdd">
                        <span>{{form.update_time}}</span>
                    </el-form-item> 
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
import http from '@/api/module_fields'
// import contractApi from '@/api/contract'
import globalApi from '@/api/global'
import {changeTitleMinin} from '@/mixin';
export default {
    name: 'moduleFields',
    mixins: [changeTitleMinin],
    data() {
        return {
            searchCondition: null,
            fieldhtmltype: null,
            fieldgroup: null,
            tableListData: [],
            loading: false,
            dialogVisible: false,
            isAdd: true,
            form: {
                typestr: []
            },
            fieldGroupData: [],
            rules: { 
                // 字段类型为复选框与下拉列表的时候才会显示 选项值 与 默认值
                fieldtitle: [
                    { required: true, message: '请填写字段名称', }
                ],
                fieldgroup: [
                    { required: true, message: '请选择模型组', }
                ],
                field: [
                    { required: true, message: '请填写字段', }
                ],
                typestr: [
                    { required: true, message: '请选择合同类型', }
                ],
                fieldsort: [
                    { required: true, message: '请填写排序', }
                ],
                fieldhtmltype: [
                    { required: true, message: '请选择字段类型', }
                ],
                fieldvalues: [
                    { required: true, message: '请填写选项值', }
                ],
                
                fieldrequire: [
                    { required: true, message: '请选择是否必填', }
                ],

                status: [
                    { required: true, message: '请选择状态', }
                ],

            },
            total: 0,
            currentPage: 1,
            limit: 15,
            code: null,
            pageParams: null,
            fieldhtmltypeData: [],
            // contractTypeData: []
        }
    },
    methods: {
        queryListData(){
            this.getListData();
        },
        getPaginationParams(params){
            this.currentPage = params.page;
            this.limit = params.limit;
            this.getListData();
        },
        openDialog(type,id){
            if(type == 'add'){
                this.form = {
                    typestr: [],
                    fieldrequire: 0,
                    status: 1
                };
                this.isAdd = true;
            } else {
                this.isAdd = false;
                http.getContentDetail({id}).then(res => {
                    let form = JSON.parse(JSON.stringify(res.data));
                    if(form.typestr.length){
                        let typestr = [];
                        form.typestr.map(it=>{
                            typestr.push(parseInt(it))
                        })
                        form.typestr = typestr;
                    }
                    console.log('form:',form)
                    this.form = form;
                })
            }
            this.dialogVisible = true;
        },
        // 编辑启用状态
        changeStatus(id,statusBoolean){
            let status = statusBoolean?0:1;
            http.updateOnlyfield({id,status}).then(res => {
                this.getListData();
            })
        },
        // 新增或编辑的提交
        handleSubmit() {
            this.$refs['form'].validate((valid) => {
                if(valid){
                    let formData =  JSON.parse(JSON.stringify(this.form));
                    console.log('formData',formData)
                    formData['module'] = this.code;
                    if(this.isAdd){
                        formData.center_id = JSON.parse(sessionStorage.getItem('user')).center_id;
                        http.createContent(formData).then(res => {
                            this.$message.success(res.msg || '新增成功！');
                            this.dialogVisible = false;
                            this.form = {};
                            this.getListData();
                        })
                    } else {
                        if(formData.create_time){
                            delete formData.create_time;
                        }
                        if(formData.update_time){
                            delete formData.update_time;
                        }
                        http.editContent(formData).then(res => {
                            this.$message.success(res.msg || '编辑成功！');
                            this.dialogVisible = false;
                            this.form = {};
                            this.getListData();
                        })
                    }
                    
                }
            })
        },
        // 删除
        handleDelete(id){
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonClass: 'el-button--danger'
            }).then(() => {
                http.deleteContent({id}).then(res => {
                    this.$message.success(res.msg || '删除成功！');
                    this.getListData();
                })
            }).catch(()=>{});
        },

        getListData(page=this.currentPage,list_rows=this.limit,module=this.code,fieldhtmltype=this.fieldhtmltype,search=this.searchCondition,fieldgroup=this.fieldgroup){
            this.loading = true;
            http.getList({page,list_rows,module,fieldhtmltype,search,fieldgroup}).then(res => {
                this.loading = false;
                this.total = res.data.total;
                let tableListData = res.data.data;
                if(tableListData.length){
                    tableListData.map(item=>{
                        item.status = item.status==1?true:false;
                    })
                }
                this.tableListData = tableListData;
            })
        },

        getFieldGroup(){
            http.getModuleGroup({module:this.code}).then(res => {
                this.fieldGroupData = res.data;
            })
        },
        getfieldhtmltypeData(){
            let basicConfig = JSON.parse(sessionStorage.getItem('basicConfig'));

            let fieldhtmltypeData = [];
            let keysData = Object.keys(basicConfig.fieldhtmltype);
            if(keysData.length){
                keysData.map(item => {
                    fieldhtmltypeData.push({value: item,label: basicConfig.fieldhtmltype[item]})
                })
                
                this.fieldhtmltypeData = fieldhtmltypeData;
            }
        },
        getPageParams(){
            if(Object.keys(this.$route.params).length){
                sessionStorage.setItem('moduleFieldsParams',JSON.stringify(this.$route.params))
            }

            let pageParams = sessionStorage.getItem('moduleFieldsParams');
            if(pageParams){
                pageParams = JSON.parse(pageParams);
                this.pageParams = pageParams;

                if(pageParams.code){
                    this.code = pageParams.code;
                    
                    this.getListData();
                    this.getFieldGroup();
                    this.getfieldhtmltypeData();
                    this.getContractType();
                }

                if(pageParams.fieldgroup){
                    let form = {
                        fieldgroup: pageParams.fieldgroup,
                        typestr: [],
                        fieldrequire: 0,
                        status: 1
                    }
                    this.form = form;
                    setTimeout(()=>{
                        this.dialogVisible = true;
                    },1000)
                    
                }
            }
        },
        getSort(){

        },
        // getContractType(){
        //     contractApi.getContractType().then(res => {
        //         this.contractTypeData = res.data;
        //     })
        // },

    },
    created() {
        this.getPageParams();
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/listPage.scss';
.moduleFields{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }

    .opt_wrap{
        padding: 0px 30px;
        margin-bottom: 20px;
    }
    .table_list{
        padding: 0px 10px;
    }

    .flag{
        padding: 3px 12px;
        background: #C6C7C9;
        color: #eee;
        display: inline-block;
        border-radius: 60px;
        line-height: 22px;
        margin: 0px 5px 5px 0px;
    }
}
</style>
